<!DOCTYPE html>
<html>
  <head>
    <script src="logic.js"></script>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="container">
      <label>
        Port:
        <select id="port-picker"></select>
      </label>

      <label>
        Status:
        <span id="status">Loading</span>
      </label>
    </div>

    <div id="inputs">
      <label>
        DCD:
        <span id="dcd_status">---</span>
      </label>

      <label>
        CTS:
        <span id="cts_status">---</span>
      </label>

      <label>
        RI:
        <span id="ri_status">---</span>
      </label>

      <label>
        DSR:
        <span id="dsr_status">---</span>
      </label>

      <div id="outputs">
        <label>
          DTR:
          <input type="checkbox" id="dtr_input"></input>
        </label>

        <label>
          RTS:
          <input type="checkbox" id="rts_input"></input>
        </label>

      </div>

<h3>How to use</h3>
<ol>
<li>Identify a serial port on your machine. These days you might need to plug in a USB-to-serial adapter.</li>
<li>Connect up to six wires to DCD (pin 1), DTR (pin 4), DSR (pin 6), RTS (pin 7), CTS (pin 8), and RI (pin 9). Write down which is which.</li>
<li>Fire up this app.</li>
<li>Make sure that the port dropdown matches your serial port.</li>
<li>Using a multimeter, confirm that any connected outputs (DTR or RTS) swing from negative voltage (true, or checked checkbox) to positive voltage (false, or unchecked checkbox) in sync with their respective checkboxes in the app.</li>
<li>Provide a reference voltage to any of the inputs (DCD, CTS, RI, and DSR) and confirm that the app's true/false indicators properly update themselves. If you want a quickie reference voltage, just connect one of the outputs to one of the inputs (e.g., DTR to DCD) and flick the output on and off. Note that the input-reading code is on a 1-second timer, so there's often a bit of latency.</li>
</ol>

  </body>
</html>
